<template>
	<view class="pm40">
		<image @tap="lljjhsdf(cardetail.image)" :src="cardetail.image" mode="aspectFill" class="kkjjmxeeert w100"></image>
		<view class="kjnmxeer">

		</view>
		<view class="pd">
			<!-- <view class="fz40 cf "> -->
			<view class="fz40 row mb10 cf">
				<view class="cf z9 fz30 col">
				{{cardetail.name}} - {{cardetail.license_full}}
				</view>
				<text class="rf" v-if="type==0">
					<view  class="kjnmxeeert" @tap="moretap">
						更多操作
					</view>
				</text>
			</view>
			<view class="fz28 cf mt10">
				序列号：{{cardetail.serial}}
			</view>
			<view class="mt80 row mb10">
				<view class="cf z9 fz30 col">
					副钥匙
				</view>
				<navigator :url="'/pages/leftSideMenu/AddViceKey?carid='+cardetail.id+'&devsn='+cardetail.devsn" class="kjnmxeeert" v-if="type==0">
					添加
				</navigator>
			</view>
			<!-- 车主副钥匙列表 -->
			<view class="mt20 kjhnnmxeert row" v-for="sd in cardetail.keys"  v-if="type==0" @tap="keysinfo(cardetail.devsn,cardetail.id,sd.id)">
				<image :src="sd.avatar" class="jjhnnhxeertr cz"></image>
				<view class="ml20 cf fz28">
					{{sd.nickname}}
				</view>
				<view class="ml20 cf fz28">
					{{sd.phone}}
				</view>
				<view class="col tr cf fz28">
					{{sd.begin_time}}-{{sd.end_time}}
				</view>
				
					<!-- <text style="color: #4CD964;padding-left:30upx ;"> 已禁用</text> -->
				
			</view>
			<!-- 副钥匙 -->
			<view class="mt20 kjhnnmxeert row" v-for="sd in cardetail.keys"  v-if="type==1">
				<image :src="sd.avatar" class="jjhnnhxeertr cz"></image>
				<view class="ml20 cf fz28">
					{{sd.nickname}}
				</view>
				<view class="ml20 cf fz28">
					{{sd.phone}}
				</view>
				<view class="col tr cf fz28">
					{{sd.begin_time}}-{{sd.end_time}}
				</view>
			
			</view>
			<!-- <view class="cen mt20" :hidden="cardetail.keys.length==0">
				<image src="../../static/img/downsd.png" mode="widthFix" class="cz jhhneeeertr"></image>
			</view>
 -->

			<view class="mt80 row mb10">
				<view class="cf z9 fz30 col">
					电子围栏
				</view>
				<view class="" v-if="type==0">
					<switch checked="true" />
				</view>
			</view>


			<view class="mt40 yj4 dfgdftyyyse row pr" @tap="jkjhsdf">
				<view class="col pd pt70 fz28 cf">
					山东省济南市围栏
					<!-- <view class="mt20 fz24 z9">经度:116.397128 纬度:39.916527</view> -->				
				</view>
				<image src="../../static/img/weilan.png" class="col jjdrttys3er"></image>
			</view>

			<view class="" v-if="type==0">
				<view class="mt80 row mb10">
					<view class="cf z9 fz30 col">
						共享授权
					</view>
					<navigator class="kjnmxeeert" :url="'SharingAuthorization?carid='+cardetail.id">
						管理
					</navigator>
				</view>
				<view class="mt20">
					<view v-for="az in cardetail.authorization_list" style="display: inline-block;">
						<navigator url="GroupPermissionDetails" class="kjeert">{{az.name}}</navigator>
					</view>
					<!-- <navigator url="GroupPermissionDetails" class="kjeert">汽车1群</navigator>
					<navigator url="GroupPermissionDetails" class="kjeert">汽车11111群</navigator> -->
				</view>
			</view>

			<view class="" v-if="type==1">
				<view class="mt80 row mb10">
					<view class="cf z9 fz30 col">
						权限
					</view>
				</view>
				<view class="mt20 pr parent">
					<view class="kjhnderty yj4 pr" :class="sd.cls" v-for="sd in rulesinfo">
						<icon type="success" size="18" color="#fff" class="dsfrtyswr" />
						<view class="jjhdertt cen">
							<image :src="'../../static/img/AddViceKey/'+sd.icon" class="jhhdrettw cz" :class="sd.classname" mode="widthFix"></image>
						</view>
						<view class="cf fz26 cen">{{sd.name}}</view>
					</view>
				</view>

				<view class="kkjmxererttw fz36 cf pm40" @tap="returncar">
					归还副钥匙
				</view>
			</view>


		</view>

		<!-- 解绑联网号  弹出层-->
		<view class="kkmmjkjseer" v-if="isjjhdff">
			<view class="kkkjnneeert">
				<view class="fz32 z3">
					解绑联网号
				</view>
				<view class="mt30 fz26 z3">
					请输入手机号{{phone}}接收到的验证码
				</view>
				<view class="pr mt60">
					<input type="text" value="" class="kjnmxeerrt fz32" placeholder="请输入验证码" v-model="ycode"/>
					<text class="kkjnnsert " :class="daojishi>0?'z9':'ls'" @tap="daojishise">
						 <text v-if="daojishi>0">{{daojishi}}s重新获取</text>
						 <text v-else>获取验证码</text>
					</text>
				</view>
				<view class="mt60 row cen fz32">
					<view class="col" @tap="isjjhdff=false">
						取消
					</view>
					<view class="col ls" @tap="babssdf">
						确定
					</view>
				</view>
			</view>
		</view>




		<!-- 过户车辆  弹出层-->
		<view class="kkmmjkjseer" v-if="isjjshdf">
			<view class="kkkjnneeert ac">
				<view class="fz32 z3">
					过户车辆
				</view>
				<view class="pr mt60">
					<input type="text" password value="" class="kjnmxeerrt fz32" placeholder="请输入您的账号密码" v-model="password"/>
					<input type="text" value="" class="kjnmxeerrt fz32 mt30" placeholder="请输入对方账号" v-model="account"  maxlength="11"  @input="searchuser"/>
				</view>
				<view class="mt60 row cen fz32">
					<view class="col" @tap="mpublic('cancel','transfer')">
						取消
					</view>
					<view class="col ls" @tap="mpublic('define','transfer')">
						确定
					</view>
				</view>
			</view>
		</view>

		<!-- 删除车辆  弹出层-->
		<view class="kkmmjkjseer" v-if="jjhnmssdf">
			<view class="kkkjnneeert ab">
				<view class="fz32 z3">
					删除车辆
				</view>
				<view class="pr mt60">
					<input type="text" password value="" class="kjnmxeerrt fz32" placeholder="请输入您的账号密码" v-model="delword"/>

				</view>
				<view class="mt60 row cen fz32">
					<view class="col" @tap="mpublic('cancel','del')">
						取消
					</view>
					<view class="col ls" @tap="mpublic('define','del')">
						确定
					</view>
				</view>
			</view>
		</view>


	</view>
</template>
<script>
	export default {
		data() {
			return {
				daojishi: 0,
				isjjhdff: false, // 是否显示 解绑联网号
				jjhnmssdf: false, // 是否显示 删除车辆
				isjjshdf: false, // 是否显示 过户车辆
				type: 1, // 0我的车 1.借的车 
				sqssf: [{
						icon: 'sfdsfa.png',
						classname: '',
						name: '开关锁',
						cls: ''
					},
					{
						icon: 'sfdsfa.png',
						classname: '',
						name: '分发副钥匙',
						cls: ''
					},
				],
				carid:"",
				cardetail:"",
				password:'',
				account:"",
				delword:"",
				phone:"",
				phones:"",
				key:"",
				ycode:"",
				rulesinfo:[],
				userid:0,
				rulesdata:{
					1:{
						id:"1",
						icon: 'kjjhfc.png',
						classname: '',
						name: '开关锁',
						cls: '',
						ruleid:1
					},
					2:{
						id:"2",
						icon: 'kjjhfd.png',
						classname: 'ab',
						name: '启动熄火',
						cls: '',
						ruleid:2
					},
					3:{
						id:"3",
						icon: 'kjjhfe.png',
						classname: 'ac',
						name: '分发副钥匙',
						cls: '',
						ruleid:0
					},4:{
						id:"4",
						icon: 'kjjhff.png',
						classname: 'ad',
						name: '远程控制',
						cls: '',
						ruleid:4
					},5:{
						id:"5",
						icon: 'kjjhfg.png',
						classname: 'ae',
						name: '实时位置',
						cls: '',
						ruleid:0
					},6:{
						id:"6",
						icon: 'kjjhfh.png',
						classname: 'af',
						name: '临时授权',
						cls: '',
						ruleid:2000
					}}
				
			}
		},
		components: {},
		onLoad(e) {
			this.type = e.type
			this.carid=e.carid			
			this.cdetail(e.carid)
			var phone=this.$store.state.userinfo
			console.log("00",phone)
			this.phones=phone.phone
			this.phone=phone.phone.replace(/(^1\d{2})(\d{4})(\d{4})/g,'$1****$3')			
		},
		moretap() {
			let th = this
			uni.showActionSheet({
				itemList: ['车辆信息', '车辆联网号', '过户车辆', '删除车辆'],
				success(e) {
					if (e.tapIndex == 0) {
						uni.navigateTo({
							url: "/pages/index/vehicleInformation?carid="+th.carid
						})
					}
					if (e.tapIndex == 1) {
						if(th.cardetail.network){
						uni.showModal({
							title: '车辆联网号',
							content: '111111111111111111',
							cancelText: '解除绑定',
							cancelColor: '#FC5A5A',
							confirmText: '好的',
							success(e) {
								// -用户点击了解除绑定
								if (e.cancel) {
									uni.showModal({
										title: '解绑联网号',
										content: '您确定要解绑本车辆联网号吗？',
										success(e) {
											// 用户点击了确认按钮
											if (e.confirm) {
												th.isjjhdff = true
											}
										}
									})
								}
							}
						})
						}else{							
							uni.showModal({
								title:'暂未绑定联网号',								
								confirmText:'去绑定',
								success(res) {
									// -用户点击了解除绑定
									if (res.confirm) {
										console.log('用户点击确定');
										uni.navigateTo({
											url:"BindingNetworking?carid="+th.carid+'&license='+th.cardetail.license_full
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							})
						}
					}
					if (e.tapIndex == 2) {
						th.isjjshdf = true
					}
					if (e.tapIndex == 3) {
						th.jjhnmssdf = true
					}
				}
			})
		},
		methods: {
			
			moretap() {
				let th = this
				uni.showActionSheet({
					itemList: ['车辆信息', '车辆联网号', '过户车辆', '删除车辆'],
					success(e) {
						if (e.tapIndex == 0) {
							uni.navigateTo({
								url: "/pages/index/vehicleInformation?carid="+th.carid
							})
						}
						if (e.tapIndex == 1) {
							if(th.cardetail.network){
							uni.showModal({
								title: '车辆联网号',
								content: th.cardetail.network,
								cancelText: '解除绑定',
								cancelColor: '#FC5A5A',
								confirmText: '好的',
								success(e) {
									// -用户点击了解除绑定
									if (e.cancel) {
										uni.showModal({
											title: '解绑联网号',
											content: '您确定要解绑本车辆联网号吗？',
											success(e) {
												// 用户点击了确认按钮
												if (e.confirm) {
													th.isjjhdff = true
												}
											}
										})
									}
								}
							})
							}else{							
								uni.showModal({
									title:'暂未绑定联网号',								
									confirmText:'去绑定',
									success(res) {
										// -用户点击了解除绑定
										if (res.confirm) {
											console.log('用户点击确定');
											uni.navigateTo({
												url:"BindingNetworking?carid="+th.carid+'&license='+th.cardetail.license_full
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								})
							}
						}
						if (e.tapIndex == 2) {
							th.isjjshdf = true
						}
						if (e.tapIndex == 3) {
							th.jjhnmssdf = true
						}
					}
				})
			},
			async	daojishise() {
				let params={}
				params.phone=this.phones
				let code=await this.post('/api/verificationCodes',params)
				console.log("验证码",code)				
				this.key=code.key				
				if (this.daojishi > 0) {
					return
				}
				this.daojishi = 60
				let hhhbgde = setInterval(a => {
					console.log(this.daojishi)
					if (this.daojishi-- < 1) {
						clearInterval(hhhbgde)
					}
				}, 1000)
			},
			lljjhsdf(imgsrc) {
				uni.navigateTo({
					url: "ChangePicture?img="+imgsrc+'&carid='+this.carid,
					animationType: 'slide-in-bottom'
				})

			},
			async	babssdf() {
				let th = this
				let params={}
				params.verification_key=th.key
				params.verification_code=th.ycode
				let unbind=await this.get('/api/car/'+th.carid+'/unbind',params,'PUT')
				console.log('0',unbind)
				if(unbind.code==0){
					uni.showToast({
						title: '解绑成功！',
						success() {
							th.isjjhdff = false
						}
					})
					th.cdetail(th.carid)
				}
				
			},
			jkjhsdf() {
				uni.navigateTo({
					url: '/pages/leftSideMenu/ElectronicFencehtml?type='+this.type
				})
			},
			async cdetail(id){
				let param= {}
				if(this.type ==1){
					// 借的车
					param.type = 1
				}
				let details=await this.get('/api/car/'+id,param)
				console.log("得到的车辆详情",details)	
				this.cardetail=details.data
				if(this.type ==1){
					let rueinfo = this.cardetail.keys[0].rule
					
					rueinfo.map(b=>{
						let str = this.rulesdata[b]
						this.rulesinfo.push(str)
					})
					console.log(this.rulesinfo)
				}
				// this.type=details.data.type - 1 //接口返回的1是我的车辆 2是借的车
			},
			mpublic(val,event){
				console.log(val)
				if(val=='cancel'){
				console.log('取消')
					this.isjjshdf=false
					this.jjhnmssdf=false
					
				}else{
					if(event=='transfer'){
						// 过户车辆
						this.too()
					}else if(event=='del'){
						// 删除车辆
						this.delete()
					}
					
				}
				console.log('取消'+this.isjjshdf)
			},
			async too(){
				console.log('过户车辆')
				let that = this
				let params={}
				params.password=this.password
				params.phone=this.account
				console.log(params)
				if(that.userid >0){
					let result=await this.get('/api/car/'+this.carid+'/transfer',params,'PUT')
					console.log("过户",result)
					// uni.showLoading()
					uni.showLoading({})
					if(result.code==0){
						let param ={}
						param.devCode = that.cardetail.devsn
						param.uid2 = that.userid
						console.log(param)
						// uni.showto
						that.dqTransferVeh(param,(res)=>{
							if(res.success){
								uni.removeStorageSync('current');
								uni.showToast({
									title: '过户成功！',
									success() {
										uni.navigateBack({
											delta:1
										})
									}
								})	
							}else{
								uni.showToast({
									title:res.message
								})
							}
						})
						
					}
				}
				
			},
			async searchuser(){
				let phone = this.account
				if(phone.length == 11){
					let cs = {}
					cs.keyword = phone
					cs.is_search = 1
					let jhsd = await this.post("/api/users/search", cs)
					// let user = this.$store.state.userinfo
					let userinfo = jhsd[0]
					
					if(jhsd.length>0){
						this.userid=userinfo.id
						console.log(this.userid);
					}else{
						uni.showToast({
							title:'输入账号有误'
						})
						return 
					}
				}
			},
			async delete(){
				let params={}
				params.password=this.delword
				let delt=await this.get('/api/car/'+this.carid,params,"DELETE")
				console.log("删除",delt)
				if(delt.code==0){
					this.dqDelVehDevice(this.cardetail.devsn,(res)=>{
						if(res.success){
							uni.removeStorageSync('current');
							uni.showToast({
								title: '删除成功！',
								success() {
									setTimeout(function(){
										uni.navigateBack({
											delta:1
										})
									},1500)
								}
							})	
						}else{
							uni.showToast({
								title:res.message
							})
						}
					})
									
				}
			},
			async returncar(){
				let that = this
				uni.showModal({
				    content: '您确认是否归还副钥匙',
				    success: function (res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							// console.log(that.cardetail.keys[0]);
							let authid = 0
							authid = that.cardetail.keys[0].authid
							// console.log(that.cardetail.keys[0]);
							if(!authid || authid == 0){
								uni.showToast({
									title:'数据错误',
									icon:'none'
								})
								return
							} 
							// console.log(that.cardetail.key);
							// console.log(authid);
							// that.dqDelAuthKey(authid,(e)=>{
							that.dqDelVehDevice(that.cardetail.devsn,(resa)=>{
								// 撤销授权
								
								// let isdeldata = e.data
								if(resa.success){
									let params={}
									let still= that.get('/api/car_key/'+that.carid+'/return',params,"DELETE")
									// uni.showModal({
									// 	content:JSON.stringify(resa)+'设备号：'+that.cardetail.devsn+'车辆ID：'+that.carid+'返回结果'+JSON.stringify(still)
									// })
									// if(still.code==0){
										uni.showToast({
											title: '归还成功！',
											icon:"none",
											success() {
												setTimeout(function(){
													uni.navigateBack({
														delta:1
													})
												},1500)
												
											}
										})	
									// }
								}else{
									uni.showToast({
										title:resa.message,
										icon:"none"
									})
								}
							})
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
				
			},
			keysinfo(devsn,cardid,keysid){
				uni.navigateTo({
					url:"/pages/leftSideMenu/ViceKeyinfo?devsn="+devsn+"&carid="+cardid+'&type=1&keysid='+keysid
				})
			}
		},
		onShow() {
			
			// this.cdetail(this.carid)
		},
		mounted() {}
	}
</script>
<style scoped>
	.kkjjmxeeert {
		height: 640upx;
	}

	.kjnmxeer {
		height: 80upx;
		background: #191D29;
		border-radius: 12upx;
		margin-top: -40upx;
		position: relative;
		z-index: 100;
	}

	.kjnmxeeert {
		width: 120upx;
		height: 58upx;
		border: 2upx solid rgba(255, 255, 255, 1);
		border-radius: 12upx;
		font-size: 26upx;
		color: #fff;
		line-height: 54upx;
		text-align: center;
	}

	.kjhnnmxeert {
		height: 166upx;
		background: rgba(53, 60, 81, 1);
		border-radius: 12upx;
		padding: 20upx;
		line-height: 110upx;
	}

	.jjhnnhxeertr {
		width: 110upx;
		height: 110upx;
		border-radius: 50%;
	}

	.jhhneeeertr {
		width: 26upx;
	}

	.kjhnderty {
		background: transparent !important;
	}

	.kkjmxererttw {
		height: 100upx;
		background: linear-gradient(180deg, rgba(27, 213, 185, 1) 0%, rgba(22, 137, 213, 1) 100%);
		border-radius: 12upx;
		line-height: 100upx;
		text-align: center;
	}
</style>
